<template>
  <div id="app">
    <div id="nav">
      <h1>后台管理</h1>
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/student">用户管理</el-menu-item>
        <el-menu-item index="/index">教学管理</el-menu-item>
        <el-menu-item index="4">题库管理</el-menu-item>
      </el-menu>
      <span class="span">
        {{ this.$store.state.user }}
        <el-button @click="out">退出登录</el-button>
        <img src="/img/1.jpg" alt="" />
      </span>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    out() {
      this.$store.commit("out");
      this.$router.push({ path: "/login" });
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#nav {
  display: flex;
  align-items: center;
  h1 {
    margin-right: 50px;
    padding-left: 50px;
  }
  img {
    width: 70px;
  }
  .el-menu.el-menu--horizontal {
    width: 80%;
  }
  .span {
    // display: flex;
    justify-content: center;
  }
}
</style>
